import { FileTextOutlined, SettingOutlined } from "@ant-design/icons";
import { Tabs } from "antd";
import React, { useEffect, useState } from "react";
import useGetComponentInfo from "../../../hooks/useGetComponentInfo";
import ComponentProp from "./ComponentProp";
import PageSetting from "./PageSetting";
import styles from "./RightPanel.module.scss";
import panelStyles from "./Panel.module.scss";

enum TAB_KEYS {
  PROP_KEY = "prop",
  SETTING_KEY = "setting",
}

const RightPanel: React.FC = () => {
  const { selectedId } = useGetComponentInfo();
  const [activeKey, setActiveKey] = useState(TAB_KEYS.PROP_KEY);
  const tabsItems = [
    {
      key: "prop",
      label: (
        <span>
          <FileTextOutlined />
          属性
        </span>
      ),
      children: <ComponentProp />,
    },
    {
      key: "setting",
      label: (
        <span>
          <SettingOutlined />
          页面设置
        </span>
      ),
      children: <PageSetting />,
    },
  ];

  useEffect(() => {
    if (selectedId) return setActiveKey(TAB_KEYS.PROP_KEY);
    setActiveKey(TAB_KEYS.SETTING_KEY);
  }, [selectedId]);

  return (
    <Tabs
      activeKey={activeKey}
      items={tabsItems}
      className={`${styles.tabs} ${panelStyles.tabs}`}
    />
  );
};

export default RightPanel;
